<template>
    <view class="container">
        <view class="content">
            <!-- 没有登陆且校验的时候展示 -->
            <template v-if="!memberStore.userInfo.userid && isCheckLogin">
                <view class="icon-zanwu text-grey icon"></view>
                <view class="text-lg text-center margin-top-sm">您还未登陆账号</view>
                <view class="text-lg text-center margin-top-sm">{{ noLoginText }}</view>
                <button v-if="isHasBtn" @click="goPage('/pages/user/login')" class="cu-btn round bg-main padding-lr-2xl margin-top-xl">去登陆</button>
            </template>
            <template v-else>
                <view class="icon-zanwu text-grey icon"></view>
                <view class="text-lg text-center margin-top-sm">{{ emptyText }}</view>
                <button v-if="isHasBtn" @click="goPage(btnLink)" class="cu-btn round bg-main padding-lr-2xl margin-top-base">
                    {{ btnText }}
                </button>
            </template>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { goPage } from "@/utils";
import { useMemberStore } from "@/store/module/member";

interface emptyType {
    emptyText?: string; // 无数据时的文字
    noLoginText?: string; // 未登陆文字
    isHasBtn?: boolean; // 是否需要按钮
    isCheckLogin?: boolean; // 是否校验登陆
    btnText?: string; // 按钮文字
    btnLink?: string; // 按钮链接
}

const props = withDefaults(defineProps<emptyType>(), {
    emptyText: "暂无内容",
    noLoginText: "请登录后查看信息",
    isHasBtn: false,
    isCheckLogin: false,
    btnText: "",
    btnLink: ""
});

const memberStore = useMemberStore();
</script>

<style scoped lang="scss">
.container {
    padding: 150rpx 0;

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon {
            font-size: 150rpx;
        }
    }
}
</style>
